/**
 * Created by zzy on 2017/9/25.
 */
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    Image,
    StyleSheet,
    ScrollView,
    PixelRatio,
    Animated,
    WebView,
    InteractionManager,
    DeviceEventEmitter
} from 'react-native';
import ProductInfoLuo from './ProductInfoLuo'
import TicketPage from '../homeLuo/TicketDetailPageLuo'
import Ionicons from 'react-native-vector-icons/Ionicons'
import BuyFooter from '../componentluo/BuyFooter'
import waterTiketStore from '../../js/store/WaterTiketStore'
import {observer} from 'mobx-react/native'
import NetRequestLuo from '../util/NetRequest'
import Share from '../../js/component/ShareModal'
import ShareUtil from '../../js/common/ShareUtil'
import Contant from '../../js/Contant'
import shoppingCartStore from '../store/ShoppingCartStore'
import productInfoStore from '../../js/store/ProductInfoStore'
var ScrollableTabView = require('react-native-scrollable-tab-view');
@observer
export default class ProductsDetailsLuo extends Component{
    static navigationOptions = {
        header: null
    };
    constructor(props){
        super(props);
        this.productItemId=this.props.navigation.state.params.productItemId;
        this.shopId=this.props.navigation.state.params.shopId;
    }
    render(){
        return <View style={{flex: 1,backgroundColor: 'white'}}>
            <ScrollableTabView initialPage={0}
                               style={{height:90}}
                               renderTabBar={()=> <HeadView shareBack={this._startShare.bind(this)
                               } {...this.props}/>}
                               tabBarActiveTextColor='#4dc0ff'
                               tabBarInactiveTextColor='#333333'
                               tabBarUnderlineStyle={{backgroundColor:'#4dc0ff',height:2,width:10}}>
                <ProductInfoLuo ref="productInfoLuo" tabLabel="商品" productItemId={this.productItemId} shopId={this.shopId} navigate={this.props.navigation.navigate}/>
                <TicketPage tabLabel="详情" productDetailPictures={productInfoStore.productModel.ActiveProductItemModel.productDetailPictures}/>
            </ScrollableTabView>
            <BuyFooter ref="buyFooter" addshoppingCart={this.addShoppingCart.bind(this)} totleCount={shoppingCartStore.selectCount}
                       confirmOrder={this.confirmOrder.bind(this)} telephoneNumber={Contant.SERVICEPHONE} collect={this._collect.bind(this)}
                       shoppingCart={()=>{this.props.navigation.navigate('ShoppingCart')}}
                       collectProductFlg={productInfoStore.productModel.CollectProductFlg}
            />
            <Share ref="modal1" shareCall={this._share.bind(this)} info={productInfoStore.productModel}/>
        </View>
    }
    _collect(){
        let collectParam={
            itemId:productInfoStore.productModel.ActiveProductItemModel.productItemId,
            type:'product',
            shopId:this.shopId
        };
        NetRequestLuo.collect(collectParam).then((data)=>{
            LOG('收藏---------'+JSON.stringify(data));
            this.refs.productInfoLuo.fetch();
        }).catch(err=>{
            this.props.navigation.navigate('Login');
        })
    }
    _startShare(){
        this.refs.modal1._open();
    };
    _share(type, productDetailInfo) {
        var shareParam = {
            type: 'news',
            title: '汇贝送水',
            description: productDetailInfo.name ,
            messageAction: undefined,
            messageExt: undefined,
            webpageUrl: 'http://www.huipay.com:9931/huibeiwater/huipayWaterClientWap/index.html?shopId='+this.shopId+'&productItemId='+this.productItemId,
        };
        LOG('webpageUrl-----------'+shareParam.webpageUrl);
        type == 0 ? ShareUtil.shareToSession(shareParam) : ShareUtil.shareToTimeline(shareParam)
    }
    addShoppingCart(){
        this.refs.buyFooter.animateShoppingCart();
        let param={
            productItemId: productInfoStore.productModel.ActiveProductItemModel.productItemId,
            productType: productInfoStore.productModel.type,
            shopId: this.shopId,
        };
        NetRequestLuo.addShoppingCart(param,'increase').then((data)=>{
            LOG('添加商品---------'+JSON.stringify(data));
            shoppingCartStore.getShoppingCart();
            DeviceEventEmitter.emit('refreshShopList');//刷新购物车
        })
    }
    confirmOrder(){
        this.props.navigation.navigate('ConfirmOrder', {productItemId:productInfoStore.productModel.ActiveProductItemModel.productItemId})
    }
    componentDidMount() {
    }
}
const HeadView = React.createClass({
    propType: {
        goToPage: React.PropTypes.func,
        activeTab: React.PropTypes.number,
        tabs: React.PropTypes.array,
        tabStyle: View.propTypes.style,
        underlineStyle: View.propTypes.style,
    },
    render(){
        const backS = {
            flexDirection:'row',
            height:50,
            alignItems:'center',
            flex:1,
        };
        const btnS = {
            height:35,
            justifyContent:'center',
            alignItems:'center',
            flex:1
        };
        const {goBack} = this.props.navigation;
        return <View style={{flexDirection:'row',alignItems:'center'}}>
            <TouchableOpacity activeOpacity={1}
                              onPress={()=>{
                                  goBack()
                              }}>
                <Ionicons name="ios-arrow-back" size={30} style={{padding:10}}/>
            </TouchableOpacity>
            <View style={backS}>
                {this.props.tabs.map((tab, i)=> {
                    let textColor = this.props.activeTab==i ? '#4dc0ff' : '#333333';
                    let lineColor = this.props.activeTab==i ? '#4dc0ff' : '#ffffff';
                    return <TouchableOpacity style={btnS}
                                             activeOpacity={1}
                                             onPress={()=>{
                                                 this.props.goToPage(i)
                                             }}
                                             key={tab}>
                        <Text style={{color:textColor}}>{tab}</Text>
                        <View style={{position: 'absolute',backgroundColor:lineColor,width:50,height:2,bottom: 0}}></View>
                    </TouchableOpacity>
                })}
            </View>
            <TouchableOpacity style={{alignItems:'center',justifyContent:'center',marginRight:10}} onPress={()=>{
                this.props.shareBack();
            }}>
                <Image style={{width:25,height:25,resizeMode:'contain'}}
                       source={require('../../asserts/shop/common_head_icon_share.png')}
                ></Image>
            </TouchableOpacity>
        </View>
    }
});